<template>
    <Category :scene="scene"></Category>

    <el-card style="margin: 10px 0px;">
        <div v-show="!scene">
            <el-button type="primary" size="default" icon="Plus" :disabled="categoryStore.c3Id ? false : true"
                @click='addAttr'>添加属性
            </el-button>
            <el-table border style="margin: 10px 0px" :data="attrArr" height="560">
                <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                <el-table-column label="属性名称" width="120px" prop="attrName"></el-table-column>
                <el-table-column label="属性值名称">
                    <!-- row：已有的属性对象 -->
                    <template #="{ row, $index }">
                        <!-- <el-tag style="margin: 5px" v-for="(item, index) in row.attrValueList" :key="item.id">
                            {{ item.valueName }}
                        </el-tag> -->
                        <el-tag style="margin: 5px" v-for="(item, index) in 6" :key="index">
                            {{ item }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120px">
                    <!-- row：已有的属性对象 -->
                    <template #="{ row, $index }">
                        <el-button type="primary" size="small" icon="Edit" @click='updateAttr'></el-button>
                        <el-button type="danger" size="small" icon="Delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination style="margin-top: 20px;" v-model:current-page="pageNo" v-model:page-size="pageSize"
                :page-sizes="[20, 40, 60]" :background="true" layout=" prev, pager, next, jumper,->,sizes,total"
                :total="400" @current-change="getHasSpu" @size-change='getHasSpu(1)' />
        </div>

        <div v-show="scene">
            <el-form inline>
                <el-form-item label="属性名称" style="width: 350px;">
                    <el-input placeholder="请你输入属性名称"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" size="default" icon="Plus" @click='addAttr'>添加属性值</el-button>
            <el-button size="default" icon="Close" @click='cancel'>取消</el-button>
            <el-table border style="margin: 20px 0;">
                <el-table-column width="80px" type="index" align="center" label="序号"></el-table-column>
                <el-table-column label="属性值名称"></el-table-column>
                <el-table-column label="属性值操作"></el-table-column>
            </el-table>
            <el-button type="primary" size="default" icon="Check" @click='addAttr'>保存</el-button>
            <el-button size="default" icon="Close" @click='cancel'>取消</el-button>
        </div>
    </el-card>
</template>

<script setup lang="ts">
    //组合式API函数
    import { watch, ref } from 'vue'
    import useCategoryStore from '@/store/modules/category'
    import { reqAttr } from '@/api/product/attribute'
    import type { AttrResponseData, Attr } from '@/api/product/attribute/type'

    let categoryStore = useCategoryStore();
    let attrArr = ref<Attr[]>([])

    const pageNo = ref<number>(1)
    const pageSize = ref<number>(20)

    //定义card组件内容切换变量
    let scene = ref<number>(0) //scene=0,显示table,scene=1,展示添加与修改属性结构

    watch(() => categoryStore.c3Id, async () => {
        // 保证三级分类有才能发请求
        attrArr.value = []
        if (!categoryStore.c3Id) return;
        await getAttr();
    })

    const getAttr = async () => {
        const { c1Id, c2Id, c3Id } = categoryStore
        let res: AttrResponseData = await reqAttr(c1Id, c2Id, c3Id)
        if (res.code == 200) {
            attrArr.value = res.data
            console.log('---------------attrArr---------------', res.data)
        }
    }

    const addAttr = () => {
        scene.value = 1
    }

    const updateAttr = () => {
        scene.value = 1
    }

    const cancel = () => {
        scene.value = 0
    }

</script>

<style lang="scss" scoped></style>